/*
 * Facebook Friend Selector
 * Copyright (c) 2011 Coders' Grave - http://codersgrave.com
 * Version: 1.1
 * Requires:
 *   jQuery v1.6.2 or above
 *   Facebook Integration - http://developers.facebook.com/docs/reference/javascript/
 */

.fs-dialog {
  color:#333;
  font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif !important;
  font-size:11px;
  width:555px
}
.fs-dialog input:focus {
  outline:none
}


/* @group Title */

.fs-dialog-title {
  background:#6d84b4;
  border:1px solid #3b5998;
  border-bottom:none;
  color:#fff;
  font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif !important;
  font-size:14px;
  font-weight:700;
  margin:0;
  padding:0;
}
.fs-dialog-title span {
  display:block;
  padding:5px 10px
}

/* @end of Title */

.fs-filter-box {
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-top:none;
  padding:10px
}

/* @group Search Bar */

.fs-input-wrap {
  background:#fff;
  border:1px solid #bdc7d8;
  position:relative
}
.fs-input-text {
  background:#fff;
  color: #333;
  border:0;
  margin:0;
  font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif !important;
  font-size:11px;
  padding:3px;
  width:95%;
}
.fs-close-small {
  background:url(friend-selector-erase.png) no-repeat 0 0 #adbdd6;
  height:15px;
  text-indent:-9999px;
  width:15px;
  position:absolute;
  right:2px;
  top:3px;
}
.fs-close-small:hover {
  background-position: 0 -16px;
  background-color: #6584b2;
}
.fs-close-small:active {
  background-position:0 -16px;
  background-color: #325c99;
}

/* @end of Search Bar */


.fs-summary-box {
  border-bottom:1px solid #ccc;
  padding:10px 5px;
  overflow:hidden
}

.fs-result-text {
  float:left
}

.fs-limit.fs-count {
  float:right;
  color:#008000
}

.fs-limit.fs-full {
  float:right;
  color:#aa0000
}


/* @group User List */

.fs-user-list {
  height:353px;
  border-bottom:1px solid #ccc;
  overflow:auto;
  position:relative
}
.fs-user-list ul {
  list-style:none;
  margin:0;
  padding:0;
  overflow:hidden
}
.fs-user-list li {
  float:left;
  padding:5px 0 0 5px;
  width:173px;
  overflow:hidden;
}

.fs-anchor {
  color:#333;
  text-decoration:none;
  cursor: pointer;
  border-color:#fff;
  border-style:solid;
  border-width:1px 0;
  display:block;
  padding:2px;
  overflow: hidden;
}
.fs-anchor:hover {
  background-color:#eceff5;
  border-color:#eceff5;
  text-decoration:none !important;
}
.fs-user-list li.checked .fs-anchor {
  background-color:#d8dfea;
  border-color:#c3cce1;
}

.fs-user-list input[type="checkbox"] {
  float:left;
  margin:6px 6px 0;
}
.fs-thumb {
  float:left;
  border:none;
  height:30px;
  margin-right:5px;
  width:30px
}
.fs-name {
  display:table-cell;
  vertical-align:middle;
  height:29px;
}

/* @end User List */


/* @group Submit and Cancel Buttons */

.fs-dialog-buttons {
  background:#f2f2f2;
  text-align:right;
  padding:8px 10px;
  position:relative
}

.fs-button::-moz-focus-inner {
  border: none;
  padding:0
}
.fs-button {
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  text-align:center;
  border-width:1px;
  border-style:solid;
  display:inline-block;
  overflow:visible;
  position:relative;
  padding:0;
  margin:0
}
.fs-button:focus {
  outline:none
}
.fs-button+.fs-button {
  margin-left:4px
}
.fs-button span {
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  border-top:1px solid #8a9cc2;
  display:inline-block;
  padding:3px 6px 4px;
  position:relative;
}
.fs-submit-button {
  background-color:#5b74a8;
  color:#fff;
  border-color:#29447e #29447e #1a356e;
}
.fs-submit-button:active {
  background-color:#4f6aa3;
  border-color:#29447e;
}
.fs-submit-button:active span {
  border-top:1px solid #4f6aa3;
}

.fs-cancel-button {
  background: #eae9e9;
  color:#333;
  border-color:#999;
}
.fs-cancel-button span {
  border-top:1px solid #fff;
}
.fs-cancel-button:active {
  background: #ddd;
}
.fs-cancel-button:active span {
  border-top:1px solid #ddd;
}

/* @end Submit and Cancel Buttons */


/* @group Color Dark */

.fs-color-dark .fs-dialog-title {
  background-color:#41505b;
  border-color:#212a30;
}
.fs-color-dark .fs-input-wrap {
  border-color:#212a30;
}
.fs-color-dark .fs-anchor:hover {
  background-color:#ededed;
  border-color:#ededed;
}
.fs-color-dark li.checked .fs-anchor {
  background-color:#ddd;
  border-color:#ccc;
}
.fs-color-dark .fs-submit-button {
  background-color:#41505b;
  border-color:#212a30 #212a30 #112a30;
}
.fs-color-dark .fs-submit-button span {
  border-top:1px solid #777;
}

.fs-color-dark .fs-close-small {
  background-color: #ccc;
}
.fs-color-dark .fs-close-small:hover {
  background-color: #41505b;
}
.fs-color-dark .fs-close-small:active {
  background-color: #212a30;
}

/* @end of Color Dark */


/* @group Color Light Blue */

.fs-color-light-blue .fs-dialog-title {
  background-color:#add7e9;
  border-color:#95c1d3;
}
.fs-color-light-blue .fs-input-wrap {
  border-color:#add7e9;
}
.fs-color-light-blue .fs-anchor:hover {
  background-color: #e9f4f8;
  border-color:#e9f4f8;
}
.fs-color-light-blue li.checked .fs-anchor {
  background-color: #d4e9f2;
  border-color:#add7e9;
}
.fs-color-light-blue .fs-submit-button {
  background-color:#add7e9;
  border-color:#95c1d3 #95c1d3 #85c1d3;
}
.fs-color-light-blue .fs-submit-button span {
  border-top:1px solid #ddd;
}

.fs-color-light-blue .fs-close-small {
  background-color: #add7e9;
}
.fs-color-light-blue .fs-close-small:hover {
  background-color: #add7e9;
}
.fs-color-light-blue .fs-close-small:active {
  background-color: #95c1d3;
}

/* @end of Color Light Blue */


/* @group Color Blue */

.fs-color-blue .fs-dialog-title {
  background-color:#139bd3;
  border-color:#1d8099;
}
.fs-color-blue .fs-input-wrap {
  border-color:#1d8099;
}
.fs-color-blue .fs-anchor:hover {
  background-color: #caebf9;
  border-color:#caebf9;
}
.fs-color-blue li.checked .fs-anchor {
  background-color: #9ddbf5;
  border-color:#139bd3;
}
.fs-color-blue .fs-submit-button {
  background-color:#139bd3;
  border-color:#1d8099 #1d8099 #0d8099;
}
.fs-color-blue .fs-submit-button span {
  border-top: 1px solid #2db0d1;
}

.fs-color-blue .fs-close-small {
  background-color: #139bd3;
}
.fs-color-blue .fs-close-small:hover {
  background-color: #139bd3;
}
.fs-color-blue .fs-close-small:active {
  background-color: #1d8099;
}

/* @end of Color Blue */


/* @group Color Green */

.fs-color-green .fs-dialog-title {
  background-color:#2fc20f;
  border-color:#2b9a10;
}
.fs-color-green .fs-input-wrap {
  border-color:#2b9a10;
}
.fs-color-green .fs-anchor:hover {
  background-color: #a7f596;
  border-color:#a7f596;
}
.fs-color-green li.checked .fs-anchor {
  background-color: #74f159;
  border-color:#2fc20f;
}
.fs-color-green .fs-submit-button {
  background-color:#2fc20f;
  border-color:#2b9a10 #2b9a10 #1b9a10;
}
.fs-color-green .fs-submit-button span {
  border-top: 1px solid #3dd918;
}

.fs-color-green .fs-close-small {
  background-color: #2fc20f;
}
.fs-color-green .fs-close-small:hover {
  background-color: #2fc20f;
}
.fs-color-green .fs-close-small:active {
  background-color: #2b9a10;
}

/* @end of Color Green */


/* @group Color Red */

.fs-color-red .fs-dialog-title {
  background-color: #d71919;
  border-color:#bb0909;
}
.fs-color-red .fs-input-wrap {
  border-color:#bb0909;
}
.fs-color-red .fs-anchor:hover {
  background-color: #fcb2b2;
  border-color:#fcb2b2;
}
.fs-color-red li.checked .fs-anchor {
  background-color: #fa7676;
  border-color: #f44141;
}
.fs-color-red .fs-submit-button {
  background-color: #f31c1c;
  border-color:#bb0909 #bb0909 #ab0909;
}
.fs-color-red .fs-submit-button span {
  border-top: 1px solid #f54747;
}

.fs-color-red .fs-close-small {
  background-color: #e90b0b;
}
.fs-color-red .fs-close-small:hover {
  background-color: #e90b0b;
}
.fs-color-red .fs-close-small:active {
  background-color: #bb0909;
}

/* @end of Color Red */


/* @group Color Pink */

.fs-color-pink .fs-dialog-title {
  background-color: #fb8ced;
  border-color:#e073ab;
}
.fs-color-pink .fs-input-wrap {
  border-color:#fb8ced;
}
.fs-color-pink .fs-anchor:hover {
  background-color: #fdd7f8;
  border-color:#fdd7f8;
}
.fs-color-pink li.checked .fs-anchor {
  background-color: #faacf0;
  border-color: #f882e9;
}
.fs-color-pink .fs-submit-button {
  background-color: #fb8ced;
  border-color:#e073ab #e073ab #d073ab;
}
.fs-color-pink .fs-submit-button span {
  border-top: 1px solid #fcb2f2;
}

.fs-color-pink .fs-close-small {
  background-color: #fb8ced;
}
.fs-color-pink .fs-close-small:hover {
  background-color: #fb8ced;
}
.fs-color-pink .fs-close-small:active {
  background-color: #e073ab;
}

/* @end of Color Pink */


/* @group Modal Box and Overlay */

#fs-overlay {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1100;
}

#fs-dialog-box-wrap{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1101;
  outline: none;
  display: none;
}

.fs-dialog-box-bg {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  width: 10px;
  height: 10px;
  z-index: 1001;
}

#fs-dialog-box-bg-n {
  top: -10px;
  left: 0;
  width: 100%;
  background-image:url(friend-selector-x.png);
}

#fs-dialog-box-bg-ne {
  top: -10px;
  right: -10px;
  background-image:url(friend-selector-corners.png);
  background-position: -10px 0;
}

#fs-dialog-box-bg-e {
  top: 0;
  right: -10px;
  height: 100%;
  background-image:url(friend-selector-y.png);
}

#fs-dialog-box-bg-se {
  bottom: -10px;
  right: -10px;
  background-image:url(friend-selector-corners.png);
  background-position: -10px -10px;
}

#fs-dialog-box-bg-s {
  bottom: -10px;
  left: 0;
  width: 100%;
  background-image:url(friend-selector-x.png);
}

#fs-dialog-box-bg-sw {
  bottom: -10px;
  left: -10px;
  background-image:url(friend-selector-corners.png);
  background-position: 0 -10px;
}

#fs-dialog-box-bg-w {
  top: 0;
  left: -10px;
  height: 100%;
  background-image:url(friend-selector-y.png);
}

#fs-dialog-box-bg-nw {
  top: -10px;
  left: -10px;
  background-image:url(friend-selector-corners.png);
  background-position: 0 0;
}

#fs-dialog-box-content {
  padding: 0;
  outline: none;
  position: relative;
  overflow: hidden;
  z-index: 1102;
  border: 0px solid #fff;
  background: #fff;
}

/* @end of Modal Box and Overlay */

#fs-loading {
  background-image:url(friend-selector-loader.gif);
  margin: -12px 0 0 -12px;
  height: 24px;
  width: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
}
